<template>
	<view class="container">
		<u-sticky offset-top="0">
			<div class="musicPlayer" :style="{visibility:playerVis}">
				<u-avatar shape="circle" size="28" :src="nowPlayInfo.coverImageUrl"
					customStyle="margin: -3px 5px -3px 0"></u-avatar>
				<div style="font-size: 14px;">{{nowPlayInfo.name}}</div> -
				<div style="font-size: 14px; color: grey;">{{nowPlayInfo.singerName}}</div>
				<u-icon class="musicPlayerIcon" :name="isPlay === true ? 'pause' : 'play-right'" color="#2979ff"
					size="20" @click="playOrPauseMusic"></u-icon>
			</div>
		</u-sticky>
		<div class="musicHeader">
			<div class="playListCover">
				<image style="width: 100%;height: 100%" :src="coverTable[0]"></image>
			</div>
			<div class="playListTitle">
				<div class="textTitle">我喜欢的音乐</div>
				<div class="userDetail">
					<div>{{this.username}}</div>
					<div>|</div>
					<div style="font-weight: bold">{{this.count}}</div>首音乐
				</div>
			</div>
			<div class="selectionArea">
				<u-tabs :list="tabList" @click="selectTab"></u-tabs>
			</div>
		</div>
		<div class="musicList">
			<u-list>
				<u-list-item v-for="(item, index) in songTable" :key="index">
					<u-cell :title="item.name" :label="singerTable[index]" @click="playMusic(index)">
						<u-avatar slot="icon" shape="square" size="35" :src="coverTable[index]"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
						<u-icon slot="right-icon" :name="nowPlayIdx === index ? 'pause' : 'play-right'" color="#2979ff"
							size="20"></u-icon>
					</u-cell>
				</u-list-item>
			</u-list>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				count: '',
				tabList: [{
					name: '最新音乐',
				}, {
					name: '推荐歌单',
				}, {
					name: '热门歌曲'
				}],
				// 全局音频变量
				audio: null,
				// 是否显示音乐播放器
				playerVis: 'hidden',
				// 记录当前音乐是播放还是暂停
				isPlay: false,
				// 当前播放的歌曲的下标 规定-2代表从启动到现在一首歌也没播放过 -1代表未播放音乐
				nowPlayIdx: -2,
				// 记录歌曲被终端时正在播放的歌曲
				lastPlayIdx: -1,
				// 记录用户听歌时长定时器id
				timer: '',
				// 当前正在播放哪首歌的信息
				nowPlayInfo: {},
				// 要展示哪些歌
				songTable: [],
				// 展示的歌的封面
				coverTable: [],
				// 展示的歌的歌手
				singerTable: [],
				// 最新音乐
				newSongList: [],
				// 推荐歌单
				recomPlayList: [],
				// 热歌榜
			};
		},
		mounted() {
			this.username = uni.getStorageSync('username')
		},
		methods: {
			// 切换导航栏
			selectTab(item) {
				console.log(item)
				if (item.index === 0) {
					this.switchToNewSong();
				}
				if (item.index === 1) {

				}
				if (item.index === 2) {

				}
			},
			// 播放或暂停音乐
			playOrPauseMusic() {
				if ( this.isPlay ) {
					this.audio.pause();
					this.isPlay = false;
				}else {
					this.audio.play();
					this.isPlay = true;
				}
			},
			// 听歌后更新听歌次数
			addListenMusicCount() {
				let that = this
				uni.request({
					url: 'http://yiyuy.nat300.top/user/updateMusicCount',
					method: 'POST',
					data: {
						"username": that.username
					},
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 播放音乐
			playMusic(idx) {
				let that = this;
				// 第一次听音乐 显示音乐播放器
				if (this.nowPlayIdx === -2) {
					// uniapp 获取dom节点方法
					let dom = uni.createSelectorQuery().select('.musicPlayer').boundingClientRect(function(data) {
						that.playerVis = 'visible'
					}).exec()
				}
				this.nowPlayInfo = this.songTable[idx];
				this.nowPlayInfo.coverImageUrl = this.coverTable[idx];
				this.nowPlayInfo.singerName = this.singerTable[idx];
				// 获取歌曲播放链接
				uni.request({
					url: `http://47.120.31.85:3200/getMusicPlay?songmid=${this.nowPlayInfo.mid}`,
					method: 'GET',
					success: (res) => {
						let mid = this.nowPlayInfo.mid;
						let musicUrl = res.data.data.playUrl[mid].url;
						if ( this.isPlay ) {
							if ( this.nowPlayIdx === idx ) {
								// 暂停当前歌曲
								this.audio.pause();
								this.isPlay = false;
								this.lastPlayIdx = idx;
								this.nowPlayIdx = -1;
							}else {
								// 切换歌曲
								this.audio = uni.createInnerAudioContext();
								this.audio.src = musicUrl;
								this.audio.play();
								this.nowPlayIdx = idx;
								this.addListenMusicCount()
							}
						}else {
							// 继续播放
							if ( this.lastPlayIdx === idx ) {
								this.audio.play();
								this.nowPlayIdx = this.lastPlayIdx;
							}else {
								// 切换歌曲
								this.audio = uni.createInnerAudioContext();
								this.audio.src = musicUrl;
								this.audio.play();
								this.nowPlayIdx = idx;
							}
							this.isPlay = true;
							this.addListenMusicCount()
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// 切换到最新音乐
			switchToNewSong() {
				// 初始化+获取封面
				this.songTable = this.newSongList
				this.count = this.songTable.length
				for (let i = 0; i < this.songTable.length; i++) {
					uni.request({
						url: `http://47.120.31.85:3200/getImageUrl?id=${this.songTable[i].album.mid}`,
						method: 'GET',
						success: (res) => {
							this.coverTable.push(res.data.response.data.imageUrl)
						},
						fail: (err) => {
							console.log(err)
						}
					})
					let singer = ''
					let singers = this.songTable[i].singer
					for (let j = 0; j < singers.length; j++) {
						singer += singers[j].name
						if (j < singers.length - 1) {
							singer += ' ';
						}
					}
					this.singerTable.push(singer)
				}
			},
			// 获取首页歌曲
			getMainRecommendMusic() {
				uni.request({
					url: 'http://47.120.31.85:3200/getRecommend',
					method: 'GET',
					success: (res) => {
						this.newSongList = res.data.response.new_song.data.songlist;
						// 初始设定为最新音乐
						this.switchToNewSong();

					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
		},
		created() {
			this.getMainRecommendMusic();
		},
	}
</script>

<style>
	uni-page-body {
		height: 100%;
		width: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.musicHeader {
		width: 80%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 5%;
	}

	.playListCover {
		width: 100px;
		height: 100px;
		background-color: red;
	}

	.playListTitle {
		margin-top: 5%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.textTitle {
		font-size: 26px;
		font-weight: bold;
	}

	.userDetail {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selectionArea {
		width: 100%;
		margin-top: 5%;
	}

	.u-subsection__item {
		width: 100%;
	}

	.musicList {
		width: 90%;
		max-height: 50%;
		overflow-y: scroll;
		margin: 0 auto;
		margin-top: 5%;
	}

	.musicPlayer {
		position: relative;
		z-index: 100;
		width: 90%;
		display: flex;
		align-items: center;
		padding: 5%;
		background: rgba(255, 255, 255, .7);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.musicPlayerIcon {
		position: absolute;
		right: 5%;
	}
</style>

<style lang="scss">
	uni-page-body {
		height: 100%;
		width: 100%;

		.container {
			width: 100%;
			height: 100%;
			position: relative;

			.musicHeader {
				width: 80%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 5%;

				.playListCover {
					width: 100px;
					height: 100px;
					background-color: red;
				}

				.playListTitle {
					margin-top: 5%;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.textTitle {
						font-size: 26px;
						font-weight: bold;
					}

					.userDetail {
						display: flex;
					}
				}

				.selectionArea {
					width: 100%;
					margin-top: 5%;

					.u-subsection__item {
						width: 100%;
					}
				}
			}

			.musicList {
				width: 90%;
				max-height: 50%;
				overflow-y: scroll;
				margin: 0 auto;
				margin-top: 5%;
			}

			.musicPlayer {
				position: relative;
				z-index: 100;
				width: 90%;
				display: flex;
				align-items: center;
				padding: 5%;
				background: rgba(255, 255, 255, .7);
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);

				.musicPlayerIcon {
					position: absolute;
					right: 5%;
				}
			}
		}
	}
</style>